<template>
  <div class="timeline-story-caption">
    <div class="caption__content">
      <div class="caption__header">
        <button
          type="button"
          class="caption__header__btn"
          @click="close"
        ></button>
      </div>
      <div class="caption__body">
        <div class="caption__text">{{ text }}</div>
        <div class="caption__img">
          <img :src="image" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 定义组件名称
defineOptions({
  name: 'TimelineStoryCaption'
})

// 定义 props
defineProps<{
  text?: string
  image?: string
}>()

// 定义 emits
const emit = defineEmits<{
  closeCaption: []
}>()

// 方法
const close = () => {
  emit('closeCaption')
}
</script>

<style lang="scss" scoped>
.timeline-story-caption {
  position: fixed;
  width: 100vw;
  height: 100%;
  min-height: calc(var(--vh) * 100);
  z-index: 1055;
  background-color: #f8f9fa;
  top: 0;
  overflow-y: auto;

  .caption__content {
    .caption__header {
      padding: 8px;

      &__btn {
        width: 24px;
        height: 24px;
        border: none;
        outline: none;
        background: none;
        background-image: url('');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
      }
    }

    .caption__body {
      .caption__text {
        padding: 4px 17px 44px;
        font-size: 16px;
        line-height: 1.5;
        color: #000;
      }

      .caption__img {
        width: 100%;

        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }
}
</style>